import { useState } from 'react';
import { useLanguage } from '@kernelproxy/i18n';
import { useNavigate } from 'react-router-dom';
import { 
  Send, 
  Paperclip,
  Mail,
  ArrowLeft
} from 'lucide-react';

type TicketPriority = 'low' | 'medium' | 'high' | 'urgent';
type TicketCategory = 'technical' | 'billing' | 'account' | 'feature' | 'other';

const CreateTicket = () => {
  const { language } = useLanguage();
  const navigate = useNavigate();
  const [subject, setSubject] = useState('');
  const [category, setCategory] = useState<TicketCategory>('technical');
  const [priority, setPriority] = useState<TicketPriority>('medium');
  const [message, setMessage] = useState('');
  const [email, setEmail] = useState('');

  const categories = [
    { value: 'technical', label: language === 'zh-CN' ? '技术支持' : 'Technical Support' },
    { value: 'billing', label: language === 'zh-CN' ? '账单问题' : 'Billing' },
    { value: 'account', label: language === 'zh-CN' ? '账户管理' : 'Account' },
    { value: 'feature', label: language === 'zh-CN' ? '功能建议' : 'Feature Request' },
    { value: 'other', label: language === 'zh-CN' ? '其他' : 'Other' }
  ];

  const priorities = [
    { value: 'low', label: language === 'zh-CN' ? '低' : 'Low' },
    { value: 'medium', label: language === 'zh-CN' ? '中' : 'Medium' },
    { value: 'high', label: language === 'zh-CN' ? '高' : 'High' },
    { value: 'urgent', label: language === 'zh-CN' ? '紧急' : 'Urgent' }
  ];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle ticket submission
    console.log({ subject, category, priority, message, email });
    // Navigate back to support page
    navigate('/dashboard/support');
  };

  const handleBack = () => {
    navigate('/dashboard/support');
  };

  return (
    <div className="p-6 max-w-4xl mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            {language === 'zh-CN' ? '创建新工单' : 'Create New Ticket'}
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            {language === 'zh-CN' ? '填写以下信息提交工单' : 'Fill in the information below to submit a ticket'}
          </p>
        </div>
        <button
          onClick={handleBack}
          className="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center gap-2"
        >
          <ArrowLeft size={18} />
          {language === 'zh-CN' ? '返回' : 'Back'}
        </button>
      </div>

      {/* Form */}
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Email */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              <div className="flex items-center gap-2">
                <Mail size={16} />
                {language === 'zh-CN' ? '联系邮箱' : 'Email'}
              </div>
            </label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
              placeholder={language === 'zh-CN' ? '您的邮箱地址' : 'Your email address'}
            />
          </div>

          {/* Subject */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {language === 'zh-CN' ? '主题' : 'Subject'}
            </label>
            <input
              type="text"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              required
              className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
              placeholder={language === 'zh-CN' ? '简要描述您的问题' : 'Brief description of your issue'}
            />
          </div>

          {/* Category and Priority */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                {language === 'zh-CN' ? '类别' : 'Category'}
              </label>
              <select
                value={category}
                onChange={(e) => setCategory(e.target.value as TicketCategory)}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
              >
                {categories.map(cat => (
                  <option key={cat.value} value={cat.value}>{cat.label}</option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                {language === 'zh-CN' ? '优先级' : 'Priority'}
              </label>
              <select
                value={priority}
                onChange={(e) => setPriority(e.target.value as TicketPriority)}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
              >
                {priorities.map(pri => (
                  <option key={pri.value} value={pri.value}>{pri.label}</option>
                ))}
              </select>
            </div>
          </div>

          {/* Message */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {language === 'zh-CN' ? '详细描述' : 'Description'}
            </label>
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              required
              rows={8}
              className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500"
              placeholder={language === 'zh-CN' ? '请详细描述您遇到的问题...' : 'Please describe your issue in detail...'}
            />
          </div>

          {/* Attachment */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              <div className="flex items-center gap-2">
                <Paperclip size={16} />
                {language === 'zh-CN' ? '附件（可选）' : 'Attachments (Optional)'}
              </div>
            </label>
            <input
              type="file"
              multiple
              className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            />
            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
              {language === 'zh-CN' ? '支持的格式：图片、PDF、文本文件。最大 10MB' : 'Supported formats: Images, PDF, Text files. Max 10MB'}
            </p>
          </div>

          {/* Submit Buttons */}
          <div className="flex gap-3 pt-4">
            <button
              type="submit"
              className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
            >
              <Send size={18} />
              {language === 'zh-CN' ? '提交工单' : 'Submit Ticket'}
            </button>
            <button
              type="button"
              onClick={handleBack}
              className="px-6 py-3 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 font-medium rounded-lg transition-colors"
            >
              {language === 'zh-CN' ? '取消' : 'Cancel'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CreateTicket;
